// 响应式布局样式

// 屏幕尺寸断点
$breakpoints: (
  'xs': 320px,   // 小屏手机
  'sm': 375px,   // 中屏手机
  'md': 414px,   // 大屏手机
  'lg': 768px,   // 平板
  'xl': 1024px   // 大平板/小电脑
);

// 媒体查询混合器
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

// 响应式字体大小
@mixin responsive-font-size($base-size: 14px) {
  font-size: $base-size;
  
  @include respond-to('sm') {
    font-size: $base-size + 1px;
  }
  
  @include respond-to('md') {
    font-size: $base-size + 2px;
  }
  
  @include respond-to('lg') {
    font-size: $base-size + 4px;
  }
}

// 响应式间距
@mixin responsive-padding($base-padding: 10px) {
  padding: $base-padding;
  
  @include respond-to('sm') {
    padding: $base-padding + 2px;
  }
  
  @include respond-to('md') {
    padding: $base-padding + 4px;
  }
  
  @include respond-to('lg') {
    padding: $base-padding + 8px;
  }
}

@mixin responsive-margin($base-margin: 10px) {
  margin: $base-margin;
  
  @include respond-to('sm') {
    margin: $base-margin + 2px;
  }
  
  @include respond-to('md') {
    margin: $base-margin + 4px;
  }
  
  @include respond-to('lg') {
    margin: $base-margin + 8px;
  }
}

// 响应式网格布局
@mixin responsive-grid($columns: 2) {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat($columns, 1fr);
  
  @include respond-to('sm') {
    gap: 12px;
    grid-template-columns: repeat($columns + 1, 1fr);
  }
  
  @include respond-to('md') {
    gap: 15px;
    grid-template-columns: repeat($columns + 2, 1fr);
  }
  
  @include respond-to('lg') {
    gap: 20px;
    grid-template-columns: repeat($columns + 3, 1fr);
  }
}

// 响应式卡片布局
.responsive-card {
  @include responsive-padding(15px);
  @include responsive-margin(10px);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  @include respond-to('lg') {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

// 响应式按钮
.responsive-button {
  @include responsive-padding(12px 20px);
  @include responsive-font-size(14px);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  @include respond-to('lg') {
    border-radius: 8px;
    min-height: 48px;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

// 响应式输入框
.responsive-input {
  @include responsive-padding(12px);
  @include responsive-font-size(14px);
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  
  @include respond-to('lg') {
    border-radius: 8px;
    min-height: 48px;
  }
  
  &:focus {
    border-color: var(--primary-color);
    outline: none;
  }
}

// 响应式列表项
.responsive-list-item {
  @include responsive-padding(15px);
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  min-height: 60px;
  
  @include respond-to('lg') {
    min-height: 80px;
  }
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f9fa;
  }
}

// 响应式标题
.responsive-title {
  @include responsive-font-size(18px);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 8px;
  
  @include respond-to('lg') {
    margin-bottom: 12px;
  }
}

// 响应式副标题
.responsive-subtitle {
  @include responsive-font-size(14px);
  color: var(--text-color-secondary);
  margin-bottom: 6px;
  
  @include respond-to('lg') {
    margin-bottom: 8px;
  }
}

// 响应式容器
.responsive-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  @include responsive-padding(10px);
  
  @include respond-to('lg') {
    max-width: 768px;
  }
  
  @include respond-to('xl') {
    max-width: 1024px;
  }
}

// 响应式网格容器
.responsive-grid-container {
  @include responsive-grid(1);
  
  &.grid-2 {
    @include responsive-grid(2);
  }
  
  &.grid-3 {
    @include responsive-grid(3);
  }
}

// 响应式弹性布局
.responsive-flex {
  display: flex;
  gap: 10px;
  
  @include respond-to('sm') {
    gap: 12px;
  }
  
  @include respond-to('md') {
    gap: 15px;
  }
  
  @include respond-to('lg') {
    gap: 20px;
  }
  
  &.flex-column {
    flex-direction: column;
    
    @include respond-to('lg') {
      flex-direction: row;
    }
  }
  
  &.flex-wrap {
    flex-wrap: wrap;
  }
  
  &.flex-center {
    justify-content: center;
    align-items: center;
  }
  
  &.flex-between {
    justify-content: space-between;
    align-items: center;
  }
}

// 响应式图片
.responsive-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  
  @include respond-to('lg') {
    border-radius: 8px;
  }
  
  &.image-cover {
    object-fit: cover;
  }
  
  &.image-contain {
    object-fit: contain;
  }
}

// 响应式表格
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  
  th, td {
    @include responsive-padding(8px);
    @include responsive-font-size(12px);
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
  }
  
  th {
    font-weight: bold;
    background-color: #f8f9fa;
  }
  
  @include respond-to('lg') {
    th, td {
      @include responsive-font-size(14px);
    }
  }
}

// 响应式模态框
.responsive-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  
  .modal-content {
    background-color: #fff;
    border-radius: 8px;
    @include responsive-padding(20px);
    margin: 20px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    
    @include respond-to('lg') {
      border-radius: 12px;
      max-width: 600px;
      margin: 40px;
    }
  }
}

// 安全区域适配
.safe-area-inset-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-inset-left {
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
}

.safe-area-inset-right {
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

// 触摸反馈
.touch-feedback {
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

// 长按效果
.long-press {
  &:active {
    animation: longPressEffect 0.6s ease-in-out;
  }
}

@keyframes longPressEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

// 滑动指示器
.swipe-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  
  .indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    
    &.active {
      background-color: #fff;
      transform: scale(1.2);
    }
  }
}